<template>
    <div class="TaskWarp">
        <div class="divMain WENZIPAIXU" @click.stop>
            <div class="divTitle" v-if="!Questions.transit">
                <h2>{{Questions.child.QtypeName}}：{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" id="tigan" v-html="Questions.child.stem[0].StemContent"></div>
            <div class="divContent" :style='{top: !Questions.transit? divContentTop:divContentMinTop}'>
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE" v-if="!Questions.transit"></div>
                <div class="boxContent">
                    <div class="chooseList" style="height: 70%;overflow-y: scroll">
                        <draggable v-model="Questions.child.stem[0].opts" @end="SetAnswer">
                            <div class="divItem noSwipwe" v-for="(item,index) in Questions.child.stem[0].opts"  v-bind:data-value="'['+(item.OptionNumber)+']'">
                                <span class="OptionsIndex">{{index+1}}</span>{{item.OptionContent}}</span>
                            </div>
                        </draggable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import draggable from 'vuedraggable'
import publicFun from '../../../../assets/js/public.js'
import AnswerHelper from '../../../../assets/js/AnswerHelper.js'
export default {
    name: "wenZhiPaiXu",
    props: ["Questions","defAnswer"],
    computed: mapGetters([
        'divContentTop',
        'divContentMinTop'
    ]),
    methods: {
        ...mapActions([
            'TOUCHMOVE'
        ]),
        SetAnswer(){

            var dxxz = $('div.WENZIPAIXU:first');
            var _answer = [];
            dxxz.find('div.divItem').each(function (i,v) {
                var dv = JSON.parse($(v).attr('data-value'));
                if ($.isArray(dv)) {
                    for (var i in dv) {
                        _answer.push(dv[i] + '');
                    }
                }
            });

            this.defAnswer.AnswerTimeJsCut=new Date().getTime()
            this.defAnswer.Answer=JSON.stringify(_answer)
            AnswerHelper.SetAnswer(this.defAnswer)
        }
    },
    components: {
        draggable,
    },
    mounted() {
        var _this = this
        _this.SetAnswer()
        publicFun.touchMove('touchMove')
    },
    data() {
        return {}
    }
}


</script>


<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../../assets/css/public.scss';

.TaskWarp {
    height: 90%;
    width: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        .divContent {
            position: absolute;
            top: 140px;
            left: 0;
            width: 100%;
            overflow: hidden;
            height: 100%;

            .boxContent {
                overflow: scroll;
                .divItem {
                    text-align: center;
                    width: 80%;
                    margin: 1em auto;
                    border-radius: 20px;
                    box-shadow: 0 2px 8px 0 #c5d0da;
                    height: 80px;
                    line-height: 80px;
                    padding: 0 54px;
                    font-size: 24px;
                    font-weight: bold;
                    position: relative;
                    .OptionsIndex {
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: #007aff;
                        line-height: 40px;
                        text-align: center;
                        color: #fff;
                        top: 20px;
                        left: 10px;
                    }
                }
            }
        }
        .current span {
            color: #666;
        }
    }
}
</style>
